<template>
    <div>
        <div class="user-list unified-bg-white unifined-border-radius">

            <div class="box-head flex unified-flex-space-between ">

                <span class="box-head-title">GoodsType List</span>

                <div class="user-list-head-search-box flex ">
                    <div class="user-list-head-search">
                        <input type="" name="" id="" value="" class="user-list-head-search-input" />
                        <span class="user-list-head-search-btn el-icon-search"></span>
                    </div>

                    <!-- 添加按钮 -->
                    <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                    <!-- 全选/反选 -->
                    <el-dropdown>
                        <span class="user-list-head-action-btn el-icon-more"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>全选</el-dropdown-item>
                            <el-dropdown-item>反选</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="unified-table-padding">
                <el-table :data="list" v-loading="pageLoading" default-expand-all>

                    <!-- <el-table-column type="index" label="#" width="60">
				</el-table-column>
 -->
                    <el-table-column prop="name" label="名称" width="200">
                    </el-table-column>
                    <el-table-column prop="addTime" label="ADD Time">

                        <template slot="header">
                            <div class="tableHeader">
                                <span>addTime</span>
                            </div>
                        </template>

                        <template slot-scope="data">
                            <div class="tableHeader">
                                <span>{{ data.row.addTime | turnTime }}</span>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="status" label="状态" width="80">
                        <template slot="header">
                            <div class="tableHeader">
                                <span>Status</span>
                            </div>
                        </template>
                        <template slot-scope="data">
                            <div class="tableHeader">
                                <span>
                                    <el-tag effect="plain" size="small" :type="data.row.status?'':'danger'">
                                        {{ data.row.status?'正常':'关闭'}}
                                    </el-tag>
                                </span>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="address" label="操作" width="140">
                    
                        <template slot="header">
                            <div class="tableHeader">
                                <span>操作</span>
                            </div>
                        </template>
                    
                        <template slot-scope="scope">
                            <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                    <el-button type="primary" size="mini" @click="clickEdit(scope.$index)">编辑</el-button>
                                    <el-button type="danger" size="mini" @click="remove(scope.$index)">删除</el-button>
                                </div>
                    
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <!-- 分页 -->
            <div class="unified-pagination unified-bg-white">
                <el-pagination :page-sizes="[10]" :total="total" layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>

            <!-- 弹窗 -->
            <transition name="el-fade-in">
                <div class="addForm" v-if="pageLoadingShow" @scroll.stop="">

                    <pageHeade background="#2269f3" color="#fff" title="添加新类目">

                        <el-button type="primary" @click="clickSave" round>确定</el-button>
                        <el-button type="warning" @click="clickCancel" round>取消</el-button>

                    </pageHeade>

                    <el-alert style="margin-bottom:48px;" title="消息提示的文案" type="info"
                        description="文字说明文字说明文字说明文字说明文字说明文字说明">
                    </el-alert>

                    <div class="form" v-loading="formLoading">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="分类名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="别名">
                                <el-input v-model="form.alias"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-switch v-model="form.state"></el-switch>
                            </el-form-item>
                        </el-form>
                    </div>

                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import pageHeade from '../../components/heade/heade.vue'
    import {
        mapState,
        mapGetters
    } from 'vuex'
    // 引入 Mixin
    import Mixin from '../../mixin/list.js'

    export default {
        mixins: [Mixin],
        components: {
            pageHeade
        },
        data() {
            return {

                api: this.$api.goods,

                // 弹窗表单数据
                form: {
                    name: '',
                    state: false,
                    alias: ""
                },
                formLoading: false
            }
        },
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters(['getGoodsType']),
            ...mapState(['pageLoadingShow'])
        },
        beforeMount() {
            this.getData()
        },
        methods: {

            // 获取服务器数据
            getData() {
                this.$axios({
                    url: this.api,
                    method: "GET",
                    params: {
                        "action": "type",
                        "params": {
                            page: this.page,
                            limit: this.limit
                        }
                    }
                }).then(res => {
                    this.list = res.data.data
                    this.pageLoading = false
                    this.total = res.data.total
                    this.page = res.data.page
                    this.pages = res.data.pages
                })
            },
            // 点击表单删除按钮
            remove(index) {
                this.$confirm('此操作将永久删除该分类的所有信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.pageLoading = true
                    return this.$axios({
                        url: this.api,
                        method: "delete",
                        params: {
                            "action": "removeType",
                            "params": {
                                "id": this.list[index]._id,
                            }
                        }
                    })
                }).then(res => {
                    if (res.data.code == 0) {
                        this.removelistData(index)
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.pageLoading = false
                })
            },
            // 点击弹窗确定按钮
            add() {
                this.$router.push("/Home/add/goods-type")
            },
            // 点击保存按钮
            clickSave() {
                if (this.form.name == "" || this.form.alias == "") {
                    this.$message({
                        message: '分类信息不能为空',
                        type: 'warning'
                    });
                } else {
                    this.formLoading = true
                    let api = "https://a96e60da-e53e-4022-bbe6-87b5c3b98d0c.bspapp.com/goods"
                    this.$axios({
                        url: api,
                        method: "POST",
                        params: {
                            "action": "addType",
                            "params": {
                                "name": this.form.name,
                                "alias": this.form.alias,
                                "status": this.form.state,
                            }
                        }
                    }).then(res => {

                        console.log(res);


                        if (res.data.code == 2021) {
                            this.formLoading = false
                            this.$store.commit('addGoodsType', [{
                                ...res.data.data
                            }])
                            this.addSuccess()
                        } else {
                            // 将弹窗隐藏
                            this.$store.commit('showLoading', false)
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'success'
                            });
                        }
                    })
                }
            },
            // 添加成功
            addSuccess() {
                // 重置表单数据
                this.reset()
                // 取消表单加载状态
                this.formLoading = false
                // 弹出结果提示
                this.$message({
                    showClose: true,
                    message: '添加分类成功',
                    type: 'success'
                });
                // 将弹窗隐藏
                this.$store.commit('showLoading', false)
            },
            // 重置表单
            reset() {
                // 重置表单数据
                this.form.name = ""
                this.form.state = 0
                this.form.alias = ""
            },

            // 点击编辑按钮
            clickEdit(index) {

                console.log(index);

            },

            // 点击弹窗取消按钮
            clickCancel() {
                // 重置表单数据
                this.reset()
                // 隐藏弹窗
                this.$store.commit('showLoading', false)

            }
        }

    }
</script>

<style scoped="scoped">
    .form {
        padding: 0px 0px;
        width: 60%;
        margin: 0 auto;
    }

    .addForm {
        width: 80%;
        position: absolute;
        height: 420px;
        background-color: #fff;
        top: 50%;
        left: 50%;
        z-index: 20;
        transform: translate(-50%, -50%);
        margin: 0 auto;
        border-radius: 15px;
        box-shadow: 0px 0px 10px 2px #2C3E50;
        overflow: auto;
    }

    .table {
        padding: 10px 20px;
        padding-bottom: 0px;
        /* border-radius: 10px; */
        box-sizing: border-box;
        background-color: #0081FF;
    }

    .add-type {
        width: 100%;
        height: 70px;
        /* margin-bottom: 10px; */
        background-color: #fff;
        /* border-radius: 10px; */
        padding: 0px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
